<template>
	<div>
		<view class="user-info">
			<view class="user-face-view">
				<view class="user-face">
					<image src="/static/images/icons/icon_yonggong.svg" mode=""></image>
				</view>
			</view>
			<view class="user-data">
				<span>{{userName}}</span>
				<span>积分：0</span>
			</view>
		</view>

		<view class="fun-list">
			<view class="fun-list-group" v-for="(item,index) in funList">
				<view class="v-bgd fun-item" v-for="(t,i) in item.itemList" @click="toPage(index,i,t.pageUrl)">
					<view class="fun-item-head">
						<image :src="t.src" mode=""></image>
						<text>{{t.text}}</text>
					</view>
					<image src="/static/images/jinru.png" mode=""></image>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<!-- 提交信息 -->
				<uni-popup-dialog mode="input" title="修改密码" placeholder="请输入新密码" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</view>
		</uni-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userName: '',
				funList: [{
					group: "1",
					itemList: [{
						itemId: '1',
						text: "经营主体",
						src: "/static/images/icons/icon_subject.svg",
						pageUrl: "subject"
					}]
				}, {
					group: "2",
					itemList: [{
						itemId: '1',
						text: "供应发布",
						src: "/static/images/icons/icon_supply.svg",
						pageUrl: "supply"
					}, {
						itemId: '2',
						text: "采购发布",
						src: "/static/images/icons/icon_purchase.svg",
						pageUrl: "purchase"
					}]
				}, {
					group: "3",
					itemList: [{
						itemId: '1',
						text: "关于",
						src: "/static/images/icons/icon_about.svg",
						pageUrl: "about"
					}, {
						itemId: '2',
						text: "修改密码",
						src: "/static/images/icons/icon_resetpwd.svg",
					}, {
						itemId: '3',
						text: "退出",
						src: "/static/images/icons/icon_exit.svg",
						pageUrl: "/pages/login/login"
					}]
				}]
			}
		},
		onShow: function() {
			this.userName = uni.getStorageSync('account');
		},
		methods: {
			toPage(index, i, pageUrl) {
				if (this.funList[index].itemList[i].pageUrl == "/pages/login/login") {
					uni.redirectTo({
						url: pageUrl,
						success: res => {
							uni.clearStorageSync();
						},
						fail: () => {},
						complete: () => {}
					})
					return;
				};
				if (pageUrl == undefined) {
					this.clickItem(i);
					return;
				}
				uni.navigateTo({
					url: pageUrl,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickItem() {
				this.$refs.popup.open();
			},
			/**
			 * 输入对话框的确定事件
			 */
			dialogInputConfirm(done, val) {
				uni.showLoading({
					title: '3秒后会关闭'
				})
				console.log(val);
				this.value = val
				setTimeout(() => {
					uni.hideLoading()
					// 关闭窗口后，恢复默认内容
					done()
				}, 3000)
			},
			/**
			 * popup 状态发生变化触发
			 * @param {Object} e
			 */
			change(e) {
				console.log('popup ' + e.type + ' 状态', e.show)
			},
		}
	}
</script>

<style>
	.user-info {
		background-color: #00A65A;
		padding: 30rpx 5% 30rpx 5%;
	}
	
	.user-face-view {
		display: flex;
		justify-content: center;
		padding: 20rpx 0 30rpx 0;
	}

	.user-face {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		height: 160rpx;
		border: 1px solid #b6b6b6;
		background-color: #ffffff;
		border-radius: 50%;
		margin-left: 20rpx;
	}

	.user-face image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.user-data {
		color: #fefefe;
	}

	.user-data span {
		font-size: 36rpx;
	}

	.user-data span+* {
		padding-left: 30rpx;
	}

	.fun-list-group {
		margin-bottom: 30rpx;
	}

	.fun-item {
		display: flex;
		justify-content: space-between;
		line-height: 100rpx;
		border-bottom: 1px solid gainsboro;
		align-items: center;
	}

	.fun-item-head {
		display: flex;
		align-items: center;
	}

	.fun-item image {
		width: 40rpx;
		height: 40rpx;
	}

	.fun-item-head text {
		margin-left: 30rpx;
		font-size: 24rpx;
	}


	.popup {
		height: fit-content;
		width: 100%;
		background: #fff;
	}
</style>
